<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>新的尺寸长度（以width为例）</title>
    <style type="text/css">
      .demo-x {
        margin-top: 30px;
        color: red;
        background: chocolate;
      }
      .content {
        background: black;
        color: white;
      }
      .demo-x:nth-child(1) .content {
        width: fit-content;
      }
      .demo-x:nth-child(2) .content, .demo-x:nth-child(5) .content {
        width: min-content;
      }
      .demo-x:nth-child(3) .content {
        width: max-content;
      }
      .demo-x:nth-child(4) .content {
        width: stretch;
        width: -webkit-fill-available;
        width: -moz-available;
      }
      .demo-x:nth-child(5) .content {
        margin-top: 10px;
      }
      button:focus {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <a href="./2-supports规则.html">上一篇</a>
    <a href="./4-border-image.html">下一篇</a>
    <br />
    <div>
      <div class="demo-x">
        <div class="content">fit-content, 宽度恰好完全包裹内容；可以用于不确定宽高的绝对定位方法居中，以便空出transform使用</div>
      </div>
      <div class="demo-x">
        <div class="content">min-content，最小宽度</div>
      </div>
      <div class="demo-x">
        <div class="content">max-content，最大宽度（相当于white-space: nowrap）</div>
      </div>
      <div class="demo-x">
        <button class="content">stretch（CSS规范规定，暂未普及），填充所有可用空间，相当于block对文档流的自动填充（此处是个button，点击变色）</button>
      </div>

      补充内容：中文断行规则：
      <div class="demo-x" style="color: white">
        （1-连词处断行）
        <div class="content">min-this</div>
        <div class="content">min-中文可以</div>
        （1-谷歌支持连词后接数字；火狐不行）
        <div class="content">min-3333this</div>
        （2-避头、避尾符号）
        <div class="content">中文</div>
        <div class="content">“中文</div>
        <div class="content">（中文</div>
        <div class="content">中文！</div>
        <div class="content">中文？</div>
        （2-比较特别地，破折号。谷歌里啥都不是，火狐是避头符号）
        <div class="content">中——文</div>
      </div>
    </div>
  </body>
</html>
